<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02计算器</title>
</head>
<body>

<!--这3个button按钮在讲BOM时补充-->
<button onclick="alert('警告框')">弹出警告框</button>
<button onclick="confirm('您确认要删除吗')">弹出确认框</button>
<button onclick="prompt('请输入会员卡号')">弹出提示输入框</button>

<input type="text" placeholder="请输入数字1" id="i1"><br>
<input type="text" placeholder="请输入数字2" id="i2"><br>
<button onclick="calc('+')">加</button>
<button onclick="calc('-')">减</button>
<button onclick="calc('*')">乘</button>
<button onclick="calc('/')">除</button>
<h4>运算结果: <span></span></h4>

<script>
    function calc(o){
        let n1 = document.getElementById('i1').value;
        let n2 = document.getElementById('i2').value;
        //console.log(n1, n2);
        //console.log(typeof n1, typeof n2);
        n1 = parseFloat(n1);
        n2 = parseFloat(n2);
        //获取span元素
        let spanE = document.querySelector('span');
        switch (o) {
            case '+' :
                spanE.innerHTML = n1 + n2;
                break;
            case '-':
                spanE.innerHTML = n1 - n2;
                break;
            case '*':
                spanE.innerHTML = n1 * n2;
                break;
            case '/':
                if (n2 != 0){
                    spanE.innerHTML = n1 / n2;
                }else {
                    alert('除数不能为0');
                }
        }
    }
</script>

</body>
</html>












